<template>
  <a-card :bordered="false" size="small">
    <lz-search ref="searchBar" :items="items" :column="3" @search="search"></lz-search>
    <lz-table ref="myTable">
      <div slot="tools">
        <a-button icon="delete" @click="dels" style="margin-left: 10px;" type="danger">
          批量删除
        </a-button>
      </div>
    </lz-table>
    <detail ref="detail" />
  </a-card>
</template>

<script>
import items from './items'
import detail from './detail'
import { del } from '@/api/sys/log.js'
export default {
  components: { detail },
  name: 'Index',
  data () {
    return {
      items: items
    }
  },
  mounted () {
    this.$refs.myTable.init(
      {
        url: globalConf.baseURL + '/admin/sys/log/getList',
        showCheckBox: true,
        queryParams: {
          type: 1
        },
        columns: [
          {
            field: 'userName',
            title: '操作人',
            align: 'left',
            width: 120,
            formatter: {
              type: 'text', // 格式化方式
              format: row => {
                return {
                  value: row.userName, // 显示文本（必填）
                  color: 'primary', // 显示颜色 'primary','danger','success','warning','info','default'
                  event: () => {
                    this.$refs.detail.showModal(row.id)
                  }
                }
              }
            }
          },
          {
            field: 'description',
            title: '操作描述',
            align: 'left',
            width: 120
          },
          {
            field: 'exMsg',
            title: '异常信息',
            align: 'left',
            width: 200,
            hidden: true
          },
          {
            field: 'resultCode',
            title: '操作结果',
            align: 'center',
            width: 100,
            formatter: {
              type: 'text',
              format: row => {
                return {
                  value: row.resultCode === 1 ? '成功' : row.resultCode === 0 ? '失败' : '未知'
                }
              }
            }
          },
          {
            field: 'actionUrl',
            title: '请求地址',
            align: 'left',
            width: 220
          },
          {
            field: 'ip',
            title: '操作IP',
            align: 'center',
            width: 120
          },
          {
            field: 'location',
            title: '操作地点',
            align: 'center',
            width: 200
          },
          {
            field: 'browser',
            title: '浏览器',
            align: 'left',
            width: 120
          },
          {
            field: 'os',
            title: '操作系统',
            align: 'left',
            width: 120
          },
          {
            field: 'requestMethod',
            title: '请求方式',
            align: 'left',
            width: 100
          }
        ]
      },
      () => {
        this.search()
      }
    )
  },
  methods: {
    search (param) {
      this.$refs.myTable.search(param || {})
    },
    showAdd () {
      this.$refs.edit.showModal()
    },
    dels () {
      const ids = this.$refs.myTable.selectedRowKeys
      if (ids.length <= 0) {
        this.$message.warning('请选择要删除的行！')
        return
      }
      this.$confirm({
        title: '确认删除？',
        content: '删除后将无法恢复！',
        onOk: () => {
          del({ id: ids.join(',') }).then(res => {
            if (res.code === 1) {
              this.$message.success('删除成功')
              this.search()
            }
          })
        }
      })
    }
  }
}
</script>

<style scoped></style>
